<template>
  <div>
    <h3>Composition API 组合式 api</h3>
    <div>
      <p>{{ str }}</p>
      <p>{{ str2 }}</p>
      <button type="button" @click="changeStr">修改str</button>
      <hr />
      <hr />
      <MyComp></MyComp>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import MyComp from '@/views/study2/StuDemo2.vue'

export default {
  // 组件的名称定义规范：和文件名保持一致，使用大驼峰书写，如果有目录最好加上目录保证组件名的唯一性
  name: 'Study1StuDemo2',
  emits: ['inFocus'],
  // setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，
  // 组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。
  components: {
    MyComp
  },
  setup(p, ctx) {
    // setup中访问this是undefined。
    console.log(this) // undefined

    // 普通变量
    let str = '我是组合式api的普遍变量'

    // 响应式变量
    const str2 = ref('我是响应式变量')

    const changeStr = () => {
      // emit触发一个绑定到子组件上的事件
      ctx.emit('inFocus')

      str2.value = '我是响应变量，我可以出发UI的更新'

      console.log('changeStr')
      str = '我不能响应式显示UI的效果，修改我没用'
      console.log(str)
      fun1()
    }

    const fun1 = () => {
      console.log('fun1')
    }

    // setup函数返回的对象中的内容，可直接在模板中使用。
    return {
      str,
      changeStr,
      str2
    }
  }
}
</script>

<style></style>
